<template>

	<view class="p-l-40 p-r-40 ">
		<uni-nav-bar statusBar left-icon="left" @clickLeft="navBack" fixed backgroundColor='#3f6efe' color='#fff'>
			<view class="w-100p flex-c flex-aic f-28">{{title}}</view>
		</uni-nav-bar>
		<uni-forms class='m-t-40' ref="baseForm" :label-width='90' :rules="rules" :modelValue="form">
			<uni-forms-item label="开始时间" name='startTime' required>
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.startTime" />
			</uni-forms-item>
			<uni-forms-item label="结束时间" name='endTime' required>
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.endTime" />
			</uni-forms-item>
			<uni-forms-item label="金额" name="price" required>
				<uni-easyinput v-model="form.money" placeholder="请输入金额" type="digit"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="报账分类" name='type' required>
				<uniDataSelect v-model="form.type" :localdata="seleList" @change="SelectChange"></uniDataSelect>
			</uni-forms-item>
			<uni-forms-item label="发票凭证" name='invoice'>
				<htzImageUpload
						:headers="{Authorization: 'Bearer ' + getAccessToken(),'tenant-id': 1}"
						:uploadSuccess="zidingyiSuccess"
						:max="1"
						@imgDelete="imagesDelete"
						@chooseFile="chooseImage"
						:action="baseUrl + '/infra/file/upload'"
						v-model="uploadLists"
				></htzImageUpload>
			</uni-forms-item>
			<div class="reason-container">
				<uni-forms-item label="报销事由" name='reason' required>
					<uni-easyinput :maxlength='255' type="textarea" v-model="form.reason" placeholder="请输入报销事由" />
				</uni-forms-item>
			</div>
		</uni-forms>

		<button class="m-t-100" type="primary" @click="postForm">提交</button>
	</view>
</template>

<script>
import uniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
import config from '@/config'
import {add, getOaDetail, getProcessInstance} from "../../api/bpm/bpm"
import {getDict} from "../../api/system/system";
import {getAccessToken} from "../../utils/auth";

const baseUrl = config.baseUrl+config.baseApi
	export default {
		components: {
			uniDataSelect,
			htzImageUpload
		},

		data() {
			return {
				baseUrl: config.baseUrl+config.baseApi,
				title:'',
				uploadLists: [],
				id:'',
				dictList: [],
				form: {

				},
				rules: {

					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择使用时间',
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请选择使用时间',
						}]
					},
					money: {
						rules: [{
							required: true,
							errorMessage: '请输入金额',
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请输入选择分类',
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入备注',
						}]
					}

				},
				seleList: [], //报账列表
			}
		},
		onLoad(e) {
			this.id = e.id
			if (this.isTrue) {
				let title = '编辑报账'
				uni.setNavigationBarTitle({
					title
				})
				this.title = title
				this.getDetail()

			} else {
				let title = '新增报账'
				uni.setNavigationBarTitle({
					title
				})
				this.title = title
			}
			this.getseleType()
		},
		computed:{
			isTrue(){
				if(this.id){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			// 选择图片
			chooseImage() {
				// 假设这里调用了uni-app的选择图片方法，并将选中的图片添加到uploadLists中
				uni.chooseImage({
					count: 1, // 最多选择一张图片
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.uploadLists.push(res.tempFiles[0])
					}
				})
			},
			getAccessToken,
			getDetail(){
				getOaDetail(this.id).then(res=>{
					this.form = res.data
				})
			},
			imagesDelete(e){
				this.form.invoice = e.tempFilePaths
			},
			zidingyiSuccess: (e) => {
				let res = JSON.parse(e.data);
				if (res.code === 0) {
					return {
						success: true,
						url: res.data
					};
				}
			},
			select(e) {
				this.$refs.files.upload()
				return false
				for (let i = 0; i < e.tempFiles.length; i++) {
					this.$http.upload('/upload', {
						name: 'file',
						filePath:e.tempFiles[i].file.path
					}).then(res => {

					})
				}
			},
			postForm() {
				let that = this;
				this.$refs.baseForm.validate().then(res => {
					let obj = this.form
					if (this.uploadLists.length > 0) {
						obj.invoice = this.uploadLists[0]; // 将第一张上传成功的图片链接赋值给 invoice 属性
					}
					add(obj).then(res => {
						uni.showToast({
							title: res.msg,
							success() {
								let time = setTimeout(function() {
									uni.navigateBack({
										success() {
											if(that.isTrue){
												uni.$emit('reload',res.data)
											}else{
												uni.$emit('add',res.data)
											}
										}
									})
									clearTimeout(time)
								})
							}
						})
					})

				})
			},
			getseleType() { //获取所有分类
				getDict().then(res => {
					this.seleList = res.data.list.map(item => ({
						value: item.value,
						text: item.label
					}));
				});
			},
			creteChange(e) {
				console.log(e)
			},
			navBack(){
				uni.navigateBack({
				})
			},
			SelectChange(e) {
				// // 处理下拉选择变化
				// // 在这里查找 form.type 对应的选项并设置为选中
				// const selectedOption = this.seleList.find(item => item.value === this.form.type);
				// console.log(selectedOption)
				// console.log(this.seleList)
				// if (selectedOption) {
				// 	// 设置选中项
				// 	this.$refs.uniDataSelect.setSelected(selectedOption);
				// }
			},

		}
	}
</script>

<style>
	page {
		background-color: white;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
.reason-container {
	margin-top: 150px; /* 设置上方元素的顶部边距为 20px */
}
	/deep/ .htz-image-upload-Item-del{
		z-index:1 !important;
	}
</style>
